<template>
<li>
<label>
<!--動態綁定數據勾選,從MyList尋找todo.done-->
<input type="checkbox" :checked='todo.done' @change='handleCheck(todo.id)'/>
<span>{{todo.title}}</span>
</label>
<button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
</li>
</template>

<script>
	export default {
		name:'MyItem',
		props:['todo','checkTodo','deleteTodo'], //聲明接收todo對象
		methods:{
			//取消勾選
			handleCheck(id){ //通知App組件將對應的todo對象的done值取反
			this.checkTodo(id)
			},
			handleDelete(id){
			//刪除
			if(confirm('確定刪除嗎?')){
				this.deleteTodo(id)
			}	
			}
		}
		}
</script>

<style scoped>
	/*item*/
	li {
		list-style: none;
		height: 36px;
		line-height: 36px;
		padding: 0 5px;
		border-bottom: 1px solid #ddd;
	}

	li label {
		float: left;
		cursor: pointer;
	}

	li label li input {
		vertical-align: middle;
		margin-right: 6px;
		position: relative;
		top: -1px;
	}

	li button {
		float: right;
		display: none;
		margin-top: 3px;
	}

	li:before {
		content: initial;
	}

	li:last-child {
		border-bottom: none;
	}

	li:hover{
		background-color: #ddd;
	}
	
	li:hover button{
		display: block; 
	}
</style>